<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <title>Document</title>
</head>
<body>
<!-- 1、容器类 -->

    <div class="container">
        <h1>我的第一个 Bootstrap 页面</h1>
        <p>这是一些文本。</p> 
    </div>
    <div class="container-fluid">
        <h1>我的第一个 Bootstrap 页面</h1>
        <p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p> 
    </div>
    <!-- =================================================== -->
<!-- 2、网格类 -->
    <div class="container">
        <div class="row">
            <div class="col-sm-3 bg-primary">.col-sm-3</div>
            <div class="col-sm-3 bg-info">.col-sm-3</div>
            <div class="col-sm-3 bg-success">.col-sm-3</div>
            <div class="col-sm-3 bg-danger">.col-sm-3</div>
        </div>
    </div>
    <!-- 以下实例在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：
        25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, 在移动手机等小型设备上会堆叠显示。 -->

    <div class="container-fluid">
        <div class="row">
        <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-danger">
            <p>RUNOOB</p>
        </div>
        <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-info">
            <p>菜鸟教程</p>
        </div>
        </div>
    </div>

<!-- ===================================================================================== -->
<!-- 3、Bootstrap4 文字排版 -->

    <div class="container">
        <h1>Display 标题</h1>
        <p>Display 标题可以输出更大更粗的字体样式。</p>
        <h1 class="display-1">Display 1</h1>
        <h1 class="display-2">Display 2</h1>
        <h1 class="display-3">Display 3</h1>
        <h1 class="display-4">Display 4</h1>
    </div>

    <div class="container">
        <h1>更小文本标题</h1>
        <p>small 元素用于字号更小的颜色更浅的文本:</p>       
        <h1>h1 标题 <small>副标题</small></h1>
        <h2>h2 标题 <small>副标题</small></h2>
        <h3>h3 标题 <small>副标题</small></h3>
        <h4>h4 标题 <small>副标题</small></h4>
        <h5>h5 标题 <small>副标题</small></h5>
        <h6>h6 标题 <small>副标题</small></h6>
    </div>

    <div class="container">
        <h1>高亮文本</h1>    
        <p>使用 mark 元素来 <mark>高亮</mark> 文本。</p>
    </div>

    <div class="container">
        <h1>Abbreviations</h1>
        <p>The abbr element is used to mark up an abbreviation or acronym:</p>
        <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
    </div>

    <div class="container">
        <h1>Blockquotes</h1>
        <p>The blockquote element is used to present content from another source:</p>
        <blockquote class="blockquote">
          <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
          <footer class="blockquote-footer">From WWF's website</footer>
        </blockquote>
    </div>

    <div class="container">
        <h1>Keyboard Inputs</h1>
        <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
        <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
    </div>

    <div class="container">
        <h2>代表指定意义的文本颜色</h2>
        <p class="text-muted">柔和的文本。</p>
        <p class="text-primary">重要的文本。</p>
        <p class="text-success">执行成功的文本。</p>
        <p class="text-info">代表一些提示信息的文本。</p>
        <p class="text-warning">警告文本。</p>
        <p class="text-danger">危险操作文本。</p>
        <p class="text-secondary">副标题。</p>
        <p class="text-dark">深灰色文字。</p>
        <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
        <p class="text-white">白色文本（白色背景上看不清楚）。</p>
    </div>

    <div class="container">
        <h2>背景颜色</h2>
        <p class="bg-primary text-white">重要的背景颜色。</p>
        <p class="bg-success text-white">执行成功背景颜色。</p>
        <p class="bg-info text-white">信息提示背景颜色。</p>
        <p class="bg-warning text-white">警告背景颜色</p>
        <p class="bg-danger text-white">危险背景颜色。</p>
        <p class="bg-secondary text-white">副标题背景颜色。</p>
        <p class="bg-dark text-white">深灰背景颜色。</p>
        <p class="bg-light text-dark">浅灰背景颜色。</p>
    </div>
    <!-- =========================================================== -->
<!-- 4、表格 -->

    <table class="table">
        <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Default</td>
            <td>Defaultson</td>
            <td>def@somemail.com</td>
        </tr>      
        <tr class="table-primary">
            <td>Primary</td>
            <td>Joe</td>
            <td>joe@example.com</td>
        </tr>
        <tr class="table-success">
            <td>Success</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr class="table-danger">
            <td>Danger</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr class="table-info">
            <td>Info</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
        <tr class="table-warning">
            <td>Warning</td>
            <td>Refs</td>
            <td>bo@example.com</td>
        </tr>
        <tr class="table-active">
            <td>Active</td>
            <td>Activeson</td>
            <td>act@example.com</td>
        </tr>
        <tr class="table-secondary">
            <td>Secondary</td>
            <td>Secondson</td>
            <td>sec@example.com</td>
        </tr>
        <tr class="table-light">
            <td>Light</td>
            <td>Angie</td>
            <td>angie@example.com</td>
        </tr>
        <tr class="table-dark text-dark">
            <td>Dark</td>
            <td>Bo</td>
            <td>bo@example.com</td>
        </tr>
        </tbody>
    </table>

    <div class="container">
        <div class="table-responsive">
            <table class="table">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Age</th>
                    <th>City</th>
                    <th>Country</th>
                    <th>Sex</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>Anna</td>
                    <td>Pitt</td>
                    <td>35</td>
                    <td>New York</td>
                    <td>USA</td>
                    <td>Female</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                  </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- ============================================================================ -->
    <div class="container">
        <h2>响应式图片</h2>
        <p>.img-fluid 类可以设置响应式图片，重置浏览器大小查看效果:</p>
        <img src="https://static.runoob.com/images/mix/paris.jpg" class="img-fluid">
    </div>
<!-- 6、jumbotron -->
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1>菜鸟教程</h1> 
            <p>学的不仅是技术，更是梦想！！！</p>
        </div>
    </div>

<!-- 7、关闭提示按钮 -->
    <div class="alert alert-success alert-dismissible">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>成功!</strong> 指定操作成功提示信息。
    </div>

<!-- 8、按钮 -->

    <div class="container">
        <button type="button" class="btn">基本按钮</button>
        <button type="button" class="btn btn-primary">主要按钮</button>
        <button type="button" class="btn btn-secondary">次要按钮</button>
        <button type="button" class="btn btn-success">成功</button>
        <button type="button" class="btn btn-info">信息</button>
        <button type="button" class="btn btn-warning">警告</button>
        <button type="button" class="btn btn-danger">危险</button>
        <button type="button" class="btn btn-dark">黑色</button>
        <button type="button" class="btn btn-light">浅色</button>
        <button type="button" class="btn btn-link">链接</button>
    </div>

<!-- 9、按钮组 -->
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-primary">Apple</button>
        <button type="button" class="btn btn-primary">Samsung</button>
        <button type="button" class="btn btn-primary">Sony</button>
    </div>

    <!-- 内嵌按钮组及下拉菜单: -->

    <div class="btn-group">
        <button type="button" class="btn btn-primary">Apple</button>
        <button type="button" class="btn btn-primary">Samsung</button>
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            Sony
            </button>
            <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Tablet</a>
            <a class="dropdown-item" href="#">Smartphone</a>
            </div>
        </div>
    </div>

    <!-- 垂直按钮组及下拉菜单: -->

    <div class="btn-group-vertical">
        <button type="button" class="btn btn-primary">Apple</button>
        <button type="button" class="btn btn-primary">Samsung</button>
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            Sony
            </button>
            <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Tablet</a>
            <a class="dropdown-item" href="#">Smartphone</a>
            </div>
        </div>
    </div>

<!-- 12、分页 -->

    <div class="container">
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="#">Previous</a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
    </div>

<!-- 15、下拉菜单 -->

    <div class="container">
        <div class="dropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Dropdown button
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
            </div>
        </div>
    </div>

<!-- 16、折叠 -->
    <div class="container">
        <h2>简单的折叠</h2>
        <p>点击按钮内容会再显示与隐藏之间切换。</p>
        <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">简单的折叠</button>
        <div id="demo" class="collapse">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
    </div>

<!-- 17、动态选项卡 -->
    <div class="container">
        <h2>选项卡切换</h2>
        <br>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
            </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div id="home" class="container tab-pane active"><br>
            <h3>HOME</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <div id="menu1" class="container tab-pane fade"><br>
            <h3>Menu 1</h3>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div id="menu2" class="container tab-pane fade"><br>
            <h3>Menu 2</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
            </div>
        </div>
    </div>

    <!-- 导航栏 -->
        <!-- 小屏幕上水平导航栏会切换为垂直的 -->
        <div class="container">
           
            <nav class="navbar navbar-expand-sm bg-primary ">
    
                <!-- Links -->
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link text-light" href="#">Link 1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-light" href="#">Link 2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-light" href="#">Link 3</a>
                    </li>
                </ul>
            
            </nav>
        
        </div>

        <!-- 垂直导航栏 -->
        <nav class="navbar bg-dark">
        
            <!-- Links -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link text-light" href="#">Link 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light" href="#">Link 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light" href="#">Link 3</a>
                </li>
            </ul>
        
        </nav>
        <hr>
        <!-- 折叠型导航栏 -->
        <nav class="navbar navbar-expand-md bg-dark navbar-dark">
            <!-- Brand -->
            <a class="navbar-brand" href="#">Navbar</a>
            
            <!-- Toggler/collapsibe Button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <!-- Navbar links -->
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li> 
                </ul>
            </div> 
        </nav>
        

</body>
<!-- jQuery and JavaScript Bundle with Popper -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
 
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</html>